<template>
  <data>
    <el-dialog :title="msgtitle" :visible="showDialog" @close="closeFn">
      <el-form
        ref="formData"
        label-width="120px"
        :model="formData"
        :rules="rules"
      >
        <el-form-item label="部门名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="2-10个字符"
            size="mini"
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input
            v-model="formData.code"
            placeholder="2-10个字符"
            style="width: 80%"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="部门负责人" prop="managerId">
          <el-select
            v-model="formData.managerId"
            size="mini"
            style="width: 80%"
            placeholder="请选择负责人"
          >
            <el-option
              v-for="item in managerList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input
            v-model="formData.introduce"
            placeholder="1-100个字符"
            type="textarea"
            :rows="4"
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item class="btnCss">
          <el-button type="primary" size="small" @click="conFn">确定</el-button>
          <el-button size="small">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </data>
</template>
<script>
import {
  getDepartment,
  simpleApi,
  addDepartmentApi,
  editDepartmentApi,
  editDepart
} from '@/api/department'
export default {
  // props: ["showDialog"],
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    faId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      managerList: [], // 部门负责人列表
      formData: {
        code: '', // 部门编码
        introduce: '', // 部部门介绍
        managerId: '', // 部门负责人的id
        name: '', // 部门名称
        pid: '' // 父级部门的id
      },
      rules: {
        code: [
          {
            required: true,
            message: '部门编码不能为空',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 10,
            message: '部门编码的长度为2-10个字符',
            trigger: 'blur'
          },
          {
            trigger: 'blur',
            validator: async(rule, value, callback) => {
              let res = await getDepartment()
              if (this.formData.id) {
                res = res.filter((item) => item.id !== this.formData.id)
              }

              if (res.some((item) => item.code === value)) {
                callback(new Error('部门编码重复了'))
              } else {
                callback()
              }
            }
          }
        ], // 部门编码
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 100,
            message: '部门介绍的长度为1-100字符',
            trigger: 'blur'
          }
        ], // 部部门介绍
        managerId: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ], // 部门负责人的id
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '部门名称的长度为2-10个字符',
            trigger: 'blur'
          },
          {
            trigger: 'blur',
            validator: async(rule, value, callback) => {
              let res = await getDepartment()

              if (this.formData.id) {
                // 编辑场景，排除自身
                res = res.filter((item) => item.id !== this.formData.id)
                // 这里我做了改进，编辑场景下，只跟自己的兄弟部门进行比较是否重复，其他部门不进行比较
                res = res.filter((item) => item.pid === this.formData.pid)
              }

              if (res.some((item) => item.name === value)) {
                callback(new Error('部门名称重复了'))
              } else {
                callback()
              }
            }
          }
        ] // 部门名称
      }
    }
  },
  computed: {
    msgtitle() {
      return this.formData.id ? '编辑部门' : '新增部门'
    }
  },
  created() {
    this.simpleFn()
  },
  methods: {
    // 取消和关闭弹层
    closeFn() {
      // 这里要清空表单，因为resetFields 只能重置在模板中绑定的数据，而输入框模板中没有id
      this.formData = {
        code: '', // 部门编码
        introduce: '', // 部部门介绍
        managerId: '', // 部门负责人的id
        name: '', // 部门名称
        pid: '' // 父级部门的id
      }
      this.$emit('update:showDialog', false)
      this.$refs.formData.resetFields() // 清空表单
    },
    // 获取负责人的列表
    async simpleFn() {
      const res = await simpleApi()
      this.managerList = res
      console.log(this.managerList)
    },
    // 确认按钮
    conFn() {
      this.$refs.formData.validate(async(valid) => {
        if (valid) {
          let msg = '新增'
          // 判断是新增还是编辑
          if (this.formData.id) {
            // 这是编辑
            await editDepart(this.formData)
            msg = '编辑'
          } else {
            // 这是新增
            await addDepartmentApi({ ...this.formData, pid: this.faId }) // 这里await  如果请求失败了，就不会执行下面的代码了
            msg = '新增'
          }

          this.$message.success(`${msg}成功`)
          this.$emit('updateForm')
          this.closeFn()
        }
      })
    },

    // 点击编辑数据回显
    async getDepartmentDetail() {
      const res = await editDepartmentApi(this.faId)
      this.formData = res
      // console.log(res);
    }
  }
}
</script>
<style scoped>
.btnCss {
  width: 80%;
  display: flex;
  justify-content: center;
}
</style>
